<div class="row">
  <h3 class="page-title">
    Module - <strong> {{action}} </strong> 
  </h3>
  <div class="col-lg-12">
      <section class="widget">
          <div class="widget-body">
              <legend>
                  <button type="button" class="btn btn-info btn-sm pull-left" ng-click="back()">
                      <i class="fa fa-backward"></i>
                      <span>Back</span>
                  </button>
              </legend>
              <div class="row">
                  <div class="col-md-2">Create Module</div>
                  <div class="col-md-8" style="border-left:1px solid #e5e5e5;padding:0 30px;margin-bottom: 30px;">
                      <div class="row">
                          <div class="col-lg-6 col-md-6 col-xs-12 " style="padding-right:30px;" ng-click="changeStep('baseInfo')">
                              <section class="widget" ng-class="currentStep === 'baseInfo' ? 'step-actived' : 'step-todo'" style="padding: 3px 10px;">
                                  <div class="widget-body clearfix">
                                      <div class="row flex-nowrap">
                                          <div class="col-xs-3">
                                              <span class="widget-icon">
                                                <i class="fa fa-edit"></i>
                                              </span>
                                          </div>
                                          <div class="col-xs-9">
                                              <h6 class="no-margin">Step 1</h6>
                                              <p class="h4 no-margin fw-normal">Create base info</p>
                                          </div>
                                      </div>
                                  </div>
                              </section>
                          </div>
                          <div class="col-lg-6 col-md-6 col-xs-12 " style="padding-left:30px;" ng-click="changeStep('setting')">
                              <section class="widget" ng-class="currentStep === 'setting' ? 'step-actived' : 'step-todo'" style="padding: 3px 10px;">
                                  <div class="widget-body clearfix">
                                      <div class="row flex-nowrap">
                                          <div class="col-xs-3">
                                              <span class="widget-icon">
                                                <i class="fa fa-gear"></i>
                                              </span>
                                          </div>
                                          <div class="col-xs-9">
                                              <h6 class="no-margin">Step 2</h6>
                                              <p class="h4 no-margin fw-normal">Set the permissions</p>
                                          </div>
                                      </div>
                                  </div>
                              </section>
                          </div>
                      </div>
                      <form novalidate="novalidate" ng-show="currentStep === 'baseInfo'">
                          <fieldset>
                              <div class="form-group">
                                  <label>Name</label>
                                  <input type="text" placeholder="" class="form-control" required="required" ng-model="baseInfo.name" autofocus>
                                  <span class="help-block">Name can contain any letters or numbers, without spaces</span>
                              </div>
                              <div class="form-group">
                                  <label>Description</label>
                                  <textarea class="form-control" rows="3" ng-model="baseInfo.desc"></textarea>
                              </div>
                              <div class="form-group">
                                  <div class="radio radio-danger" style="display: inline-block;margin-right: 20px">
                                      <label>
                                          <input type="radio" name="visiblity" ng-model="baseInfo.visible" value="public"> Public
                                      </label>
                                  </div>
                                  <div class="radio radio-danger" style="display: inline-block;">
                                      <label>
                                          <input type="radio" name="visiblity" ng-model="baseInfo.visible" value="private"> Private
                                      </label>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <button class="btn btn-info" ng-click="saveBaseInfo()">Create Project</button>
                              </div>
                          </fieldset>
                      </form>
                      <div class="form-group" ng-show="currentStep === 'setting'" id="projectInfo">
                        <div class="row marg-no">
                          <div class="org-info">
                            <span class="org-name" ng-click="isShowOrgs = !isShowOrgs">{{currentApp.name}}<i class="fa fa-angle-down org-down"></i></span>
                            <ul class="all-orgizations" ng-if="isShowOrgs">
                              <li class="item-org" ng-repeat="item in applicationList" ng-click="getCurrentApp(item)">{{item.name}}</li>
                            </ul>
                          </div>
                        </div>
                        <div class="row marg-no">
                          <ul class="col-xs-3 all-teams" ng-class="teamList.length>0? 'bg-grey': ''">
                            <li class="item-team" ng-repeat="item in teamList" ng-class="item.isChosed?'bg-chosed':'bg-nochosed'" ng-click="choseTeam(item)">{{item.name}}</li>
                          </ul>
                          <div class="col-xs-1"><i class="fa fa-link"></i></div>
                          <div class="col-xs-3 limit">
                            <span class="space" ng-click="getRole(0)">Admin</span>
                            <span class="space" ng-click="getRole(1)">Readonly</span>
                            <span class="space" ng-click="getRole(2)">ReadWrite</span>
                          </div>
                          <div class="col-xs-2"><i class="fa fa-long-arrow-right"></i></div>
                          <ul class="col-xs-3 role-teams bg-grey">
                            <li class="item-role" ng-repeat="item in roleTeams">
                              <h5 class="role-name">{{item.role}}</h5>
                              <p class="role-team" ng-repeat="team in item.teams">{{team.name}}</p>
                            </li>
                          </ul>
                        </div>
                        <div class="form-group">
                          <button class="btn btn-info" ng-click="saveSetting()">Save Permissions</button>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </section>
  </div>
</div>
